<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于验证用户短信验证码的场景，也可以结合fu-keyboard的键盘组件使用。
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<fu-code-input v-model="value1"></fu-code-input>
		</fu-section>
		
		<fu-section title="底部提示线" customClass="fu-m-t-20" type="line">
			<fu-code-input v-model="value3" mode="line"></fu-code-input>
		</fu-section>
		
		<fu-section title="修改验证码长度" customClass="fu-m-t-20" type="line">
			<fu-code-input v-model="value4" :maxlength="6"></fu-code-input>
		</fu-section>
		
		<fu-section title="使用圆点隐藏已输入" customClass="fu-m-t-20" type="line">
			<fu-code-input v-model="value5" dot></fu-code-input>
		</fu-section>
		
		<fu-section title="字体加粗" customClass="fu-m-t-20" type="line">
			<fu-code-input v-model="value7" bold></fu-code-input>
		</fu-section>
		
		<fu-section title="自定义样式" customClass="fu-m-t-20" type="line">
			<fu-code-input v-model="value8" color="#3D7EFF" borderColor="#9EBEFF" :space="0" mode="box" hairline></fu-code-input>
			<fu-code-input v-model="value8" color="#ffaa00" borderColor="#ffaa00" mode="line"></fu-code-input>
		</fu-section>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	// data数据
	let value1 = ref(25);
	let value2 = ref('');
	let value3 = ref('');
	let value4 = ref('');
	let value5 = ref('');
	let value6 = ref('');
	let value7 = ref('');
	let value8 = ref('');
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>